<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/MemberTemplate.xhtml">

    <ui:define name="contentInsert">
        <script type="text/javascript">
            //<![CDATA[
            var toggling = 'on';
            var obj;
            var name;
            var status;
            var costStatus;
            var cost = 0.00;
            var numTickets = 0;
            
            function select(id){
                alert(id);
            }
            
            function selection(id, c){
                var count = 0;
                while(document.images[count].title != id){
                    count++;
                }
                var image = document.images[count].src;
                name = image.substring(image.lastIndexOf("/") + 1);
                //seat = id.substring(id.lastIndexOf(":") + 1);
                if(name == "AvailableSeat.gif"){
                    document.images[count].src = "./../ticketingsymbols/SelectedSeat.gif";
                    document.getElementById('status').innerHTML = 'Seat ' + id + ' selected';
                    cost += c;
                    numTicket = document.getElementById('numTicket').innerHTML;
                    numTicket++;
                    document.getElementById('numTicket').innerHTML = numTicket;
                    document.getElementById('purchaseForm:ticketsNum').value = numTicket; 
                    document.getElementById('seatsSelectedDisplay').innerHTML += id + ' ';
                    document.getElementById('purchaseForm:seatsSelected').value += id + ' ';
                }else if(name == "SelectedSeat.gif"){
                    document.images[count].src = "./../ticketingsymbols/AvailableSeat.gif";
                    cost -= c;
                    document.getElementById('status').innerHTML = 'Seat ' + id + ' deselected';
                    numTicket = document.getElementById('numTicket').innerHTML;
                    numTicket--;
                    document.getElementById('numTicket').innerHTML = numTicket;
                    var temp = document.getElementById('seatsSelectedDisplay').innerHTML;
                    var parta = temp.substring(0, temp.indexOf(id));
                    var partb = temp.substring(temp.indexOf(id) + id.length, temp.length);
                    temp = parta + partb;
                    document.getElementById('seatsSelectedDisplay').innerHTML = temp;
                    document.getElementById('purchaseForm:seatsSelected').value = temp;
                    document.getElementById('purchaseForm:ticketsNum').value = numTicket; 
                    numTickets--;
                }else if(name == "OccupiedSeat.gif"){
                    document.getElementById('status').innerHTML = 'Seat ' + id + ' is already occupied';
                }
                var tbl = document.getElementById('my_table');
                var numcols = tbl.rows[0].cells.length - 1;
                var numrows = tbl.rows.length - 1;
                var totalseats = numcols * numrows;
                var seats = 0;
                count = 7;
                while(count <= totalseats + 4){
                    if(document.images[count].src.substring(image.lastIndexOf("/") + 1) == "SelectedSeat.gif"){
                        seats++;
                    }
                    count++;
                }
                if(seats == 1 && cost > c){
                    cost = c;
                    document.getElementById('totalcostdisplay').innerHTML = 0;
                    document.getElementById('purchaseForm:totalcost').value = 0;
                    document.getElementById('seatsSelectedDisplay').innerHTML = id + ' ';
                    document.getElementById('purchaseForm:seatsSelected').value = id + ' ';
                }
                var currentCost = cost.toFixed(2);
                document.getElementById('totalcostdisplay').innerHTML = currentCost;
                document.getElementById('purchaseForm:totalcost').value = currentCost;
                
            }
            
            function convert(c){
                if((c * 100) % 100 == 0){
                    return c + ".00";
                }else if((c * 100) % 10 == 0){
                    return c + "0";
                }else{
                    return c;
                }
            }
            
            //]]>
        </script>

        <p:layout style="table-layout:auto; height:700px">
            <p:layoutUnit position="center" style="color: White" header="Book Show for #{userPerformanceMB.selectedEvent}" scrollable="true">
                <h:form id="purchaseForm">
                    <p:wizard widgetVar="buyWizard" flowListener="#{userPerformanceMB.onFlowProcess}">
                        <p:tab id="selectTiming" title="STEP #1: SELECT TIMESLOT">
                            <p:panel header="STEP #1: SELECT TIMESLOT AND VENUE">
                                <p:message for="selectShow"/>
                                <h:outputText value="Select Date, Time and Venue: " />
                                <h:selectOneMenu id="selectShow" style="width: 650px" value="#{userPerformanceMB.selectedSlot}" requiredMessage="A Slot is Required!" required="true">
                                    <f:selectItem itemLabel="Select One..." itemValue= ""/>
                                    <f:selectItems value="#{userPerformanceMB.getSpecificShows(userPerformanceMB.selectedEventId)}"></f:selectItems>
                                </h:selectOneMenu>
                                <hr/>
                                <p:commandButton immediate="true" id="cancellation1" value="Back to Mainpage" action="performancemain.xhtml?faces-redirect=true"/>
                            </p:panel>  
                        </p:tab>
                        <p:tab id="selectArea" title="STEP #2: SELECT AREA">
                            <p:panel header="STEP #2: CHOOSE AN AREA">
                                <p:message for="selectAreaName"/>
                                <h4>Selected Show Information</h4>
                                <h:outputText value="Venue: #{userPerformanceMB.buyShowVenues}"/>
                                <br/>
                                <h:outputText value="Date: #{userPerformanceMB.buyShowDate}"/>
                                <br/>
                                <h:outputText value="Time: #{userPerformanceMB.buyShowTime}"/>
                                <hr/>
                                <h:outputText value="Select Area: " />
                                <h:selectOneMenu id="selectAreaName" style="width: 650px" value="#{userPerformanceMB.selectedArea}" required="true">
                                    <f:selectItem itemLabel="Select One..." itemValue= ""/>
                                    <f:selectItems value="#{userPerformanceMB.buyShowAreasList}"></f:selectItems>
                                </h:selectOneMenu>
                                <hr/>
                                <h:outputText value="Floorplan:"/>
                                <br/>
                                <p:graphicImage value="#{userPerformanceMB.selectedShowLayout}" width="100%" height="300"/>
                                <hr/>
                                <p:commandButton immediate="true" id="cancellation2" value="Back to Mainpage" action="performancemain.xhtml?faces-redirect=true"/>
                            </p:panel> 
                        </p:tab>
                        <p:tab id="selectSeat" title="STEP #3: SELECT SEAT">
                            <p:panel header="STEP #3: SELECT SEAT (CHECK THAT THE SHOW DATE IS CORRECT)">
                                <h:messages errorClass="error"/>
                                <h2>You have selected: #{userPerformanceMB.selectedArea}</h2>
                                <hr/>
                                <h1>Select Seats: </h1>
                                <br/>
                                <h:outputText value="Note: "/>
                                <h:graphicImage id="available" value="./../ticketingsymbols/AvailableSeat.gif"/>
                                <h:outputText value=" - available "/>
                                <h:graphicImage id="selected" value="./../ticketingsymbols/SelectedSeat.gif"/>
                                <h:outputText value=" - selected "/>
                                <h:graphicImage id="occupied" value="./../ticketingsymbols/OccupiedSeat.gif"/>
                                <h:outputText value=" - occupied "/>
                                <h:graphicImage id="empty" value="./../ticketingsymbols/EmptySpaceSeat.gif"/>
                                <h:outputText value=" - empty "/>
                                <hr/>
                                <table id="tableTop">
                                    <h:panelGrid width="100%" bgcolor="yellow">
                                        <p:column>
                                            <div align="center">STAGE</div>
                                        </p:column>
                                    </h:panelGrid>
                                    <table id="my_table">
                                        <tbody>
                                            <tr>
                                                <td>Row/Column</td>
                                                <ui:repeat var="columnLabel" value="#{userPerformanceMB.getAllColumns(userPerformanceMB.buyShowAreaId)}">
                                                    <td align="center">#{columnLabel.toString()}</td>
                                                </ui:repeat>
                                            </tr>
                                        </tbody>
                                        <tbody>
                                            <ui:repeat var="rows" value="#{userPerformanceMB.getAllSeats(userPerformanceMB.buyShowAreaId)}">
                                                <tr>
                                                    <td align="right">
                                                    #{rows.row}
                                                    </td>
                                                    <ui:repeat var="columns" value="#{rows.columns}">
                                                        <td>
                                                            <h:graphicImage id="a"  title="#{rows.row}#{columns.column}" value="./../#{columns.imagePath}" width = "20" height = "20" onclick="selection('#{rows.row}#{columns.column}', #{userPerformanceMB.cost})"/>
                                                        </td>
                                                    </ui:repeat>
                                                </tr>
                                            </ui:repeat>
                                        </tbody>
                                    </table>
                                </table>
                                <hr/>
                                <p><b id="status">choose</b></p>
                                <hr/>
                                <p><b>seats selected:</b></p>
                                <p><b id="seatsSelectedDisplay"></b></p>
                                <h:inputHidden id="seatsSelected" value="#{userPerformanceMB.buyShowTickets}" />
                                <hr/>
                                <table border="2">
                                    <tr>
                                        <td nowrap="nowrap" width="150">Number of Tickets</td>
                                        <td nowrap="nowrap" width="120" align="right"><b id="numTicket">0</b>
                                            <h:inputHidden id="ticketsNum" value="#{userPerformanceMB.buyShowNumTickets}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Total Cost (in S$)</td>
                                        <td align="right"><b id="totalcostdisplay">0.00</b></td>
                                        <h:inputHidden id="totalcost" value="#{userPerformanceMB.buyShowCost}" />
                                    </tr>
                                </table>
                                <hr/>

                            </p:panel>
                            <p:commandButton immediate="true" id="cancellation3" value="Back to Mainpage" action="performancemain.xhtml?faces-redirect=true"/>
                        </p:tab>
                        <p:tab id="confirmation" title="STEP #4: CONFIRMATION">
                            <p:panel header="STEP #4: CONFIRMATION PAGE">
                                <h:messages errorClass="error"/>
                                <h2>Summary:</h2>
                                <h:outputText value="Show Name: #{userPerformanceMB.selectedEvent}"/>
                                <br/>
                                <h:outputText value="Show Time: #{userPerformanceMB.buyShowDate} #{userPerformanceMB.buyShowTime}"/>
                                <br/>
                                <h:outputText value="Venue: #{userPerformanceMB.buyShowVenues} "/>
                                <br/>
                                <h:outputText value="Area Name: #{userPerformanceMB.buyShowArea} "/>
                                <br/>
                                <h:outputLabel value="Address: #{userPerformanceMB.buyShowAddress} " />
                                <br/>
                                <h:outputText value="Seat(s) Selected: #{userPerformanceMB.buyShowTickets}"/>
                                <br/>
                                <h:outputText value="Total Cost: $"/>
                                <h:outputText value="#{userPerformanceMB.buyShowCost}">
                                    <f:convertNumber pattern="0.00" currencySymbol="$" type="currency"/>
                                </h:outputText>
                                <br/>
                                <h:outputText style="font-style:italic" value="Please note that you are required to complete the purchase before session ends."/>
                                <br/>
                            </p:panel>
                            <hr/>
                            <br/>
                            
                            <!--Paypal button-->
                            <form id="id_PaypalForm" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" 
                                  style="margin-left:auto;margin-right:auto;">  

                                <input type="hidden" name="cmd" value="_xclick"/>  
                                <input type="hidden" name="business" value="#{returnURLMB.tCubePayPalEmail}"/>  
                                <input type="hidden" name="item_name"   value="Ticket Purchase"/>  
                                <input type="hidden" name="item_number" value="0"/>  
                                <input type="hidden" name="amount" value="#{userPerformanceMB.buyShowCost}"/>  
                                <input type="hidden" name="tax" value="0"/>  
                                <input type="hidden" name="quantity" value="1"/>  
                                <input type="hidden" name="no_note" value="1"/>  
                                <input type="hidden" name="currency_code" value="SGD"/> 
                                <input type="hidden" name="return" value="#{returnURLMB.getReturnURL_PerformanceTicketPurchase()}"/> 

                                <input type="image" name="submit" border="0"
                                       src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif"  
                                       alt="PayPal - The safer, easier way to pay online"
                                       />  
                            </form> 
                            <!--End Paypal button-->
                            
                            
                            <br/><br/>
                            <p:commandButton immediate="true" id="cancellation4" value="Back to Mainpage" action="performancemain.xhtml?faces-redirect=true"/>
                        </p:tab>
                    </p:wizard>
                </h:form>
            </p:layoutUnit>
        </p:layout>
 </ui:define>
</ui:composition>